<template>
  <div class="app-container documentation-container">

      <div>
            <p>1.HTML5常用的语义化标签以及使用它们的优点</p>
            <p style="padding-left:15px;padding-bottom:10px">  代码结构清晰，方便阅读，有利于团队合作开发。
                 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
                  有利于搜索引擎优化（SEO）。
           </p>
      </div>
      <div style="padding-left:0px;padding-bottom:15px">
             2. padding(对内)  margin(对外)  vw(相对于视口及设备的宽度) 百分比(相对于父元素)
      </div>

      <div style="padding-left:0px;padding-bottom:15px">
             3.如何让谷歌支持小字体  scale(放大缩小)
      </div>

      <div style="padding-left:0px;padding-bottom:10px">
             4.行内元素不换行  行内元素不设置大小  大小有内容决定  块及元素独立占一行  元素有继承关系
      </div>  

      <div>
             <p>5.两种盒子模型</p>
             <p style="padding-left:15px">
                w3c的盒子模型： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，
                 即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。
            </p>
             <p style="padding-left:15px">  
               IE的盒子模型： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，
               即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 。
             </p>
      </div> 

     

      <div>
            <p>6.display:none与block测试</p>
            <p v-if="showStatus">display测试 </p>
            <p > 
                <el-button @click="enterClickFm"> 点击切换</el-button>
           </p>
             <p> 使用visibility:hidden比display:none性能上要好，display:none切换显示时
             页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流 ）
              而visibility切换是否显示时则不会引起回流。
            </p>
               <p>那为啥vue中不使用visibility:hidden替代 display:none  个人感觉应该还是页面的美感上考虑的 
                  页面总有一块地方站着地方但是却不显示内容 显得不好看
               </p>
        </div>   

        <!-- <div>
              <div v-for="item in articleList" :key="item.id">
                 {{  item.name}}
              </div>
              <el-button @click="addClickFm">  添加一个元素    </el-button>
        </div> -->

         <div style="padding-left:0px;padding-bottom:15px">
             7.cookie的特点：
                 保存到客户端，容易被篡改(删除、禁用)
                  保存的数据量有限的
                  简单易懂好用
              cookie的缺点：
                  保存在客户端，容易被篡改。
                  大小受限，本身最大4kb。
        </div>  

        <div style="padding-left:0px;padding-bottom:15px">  8.session原理
                  当客户端第一次请求服务器的时候，服务器生成一份session保存在服务端，
                   将该数据(session)的id以cookie的形式传递给客户端；以后的每次请求，
                   浏览器都会自动的携带cookie来访问服务器(session数据id)。
        </div>


        <div style="padding-left:0px;padding-bottom:15px">  
               <p> 
                     cookie和session的共同点
                     cookie和session都是用来跟踪浏览器用户身份的会话方式。
                  
               </p>
               <p> 
                     cookie和session区别
                      cookie是保存在客户端的

                      cookie有大小限制

                      session是保存在服务器端

                      session更加安全

                      session会比较占用服务器性能，当访问增多时应用cookie

               </p>
            
        </div>

        <div style="padding-left:0px;padding-bottom:15px">
                9. localStorage  采用的编码是UTF-16  DOMstring     5M  单位是字符串的长度 而不是字符数
                  localStorage  键占存贮空间      localStorage  键的数量对读写性能影响不大  但值影响大  不建议保存大的数据
        </div>

         <div style="padding-left:0px;padding-bottom:15px">
                10. localStorage  采用的编码是UTF-16  DOMstring     5M  单位是字符串的长度 而不是字符数
                  localStorage  键占存贮空间      localStorage  键的数量对读写性能影响不大  但值影响大  不建议保存大的数据
        </div>

        <div>
                11.localStorage和sessionStorage的区别
           <p style="padding-left:15px">  1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。 </p>

            <p style="padding-left:15px">  2、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。  </p>


            <p style="padding-left:15px">  4、sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。  </p>


            <p style="padding-left:15px">  5、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的
               localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，
               页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
           </p>


        </div>
 
         <div style="padding-left:0px;padding-bottom:15px">
              12.cookie和localStorage都有跨域的问题
        </div>

        <div style="padding-left:0px;padding-bottom:15px">
              13  Blob是一种二进制对象(包括字符，文件等等)，es6对其进行了补充  <br />
                  File是基于Blob的一种二进制文件对象,扩展了Blob，es6同样进行了补充 <br />
                   ArrayBuffer是ES6新引入的二进制缓冲区 <br />
                   Buffer是Nodejs内置的二进制缓冲区，Buffer相当于ES6中Uint8Array(属于TypedArray)的一种 <br />
        </div>
        <div style="padding-left:0px;padding-bottom:15px">
              14.Blob 分片
                  除了使用Blob()构造函数来创建blob 对象之外，还可以从 blob 对象中创建blob，
                  也就是将 blob 对象切片。Blob 对象内置了 slice() 方法用来将 blob 对象分片
        </div>

          <div style="padding-left:0px;padding-bottom:15px">
              15.  不定宽高元素的居住 
                 绝对定位 + transform 以及flex
          </div>

          <div style="padding-left:0px;padding-bottom:15px">
              16.   md5加密出来有多少位
               MD5加密后的位数一般为两种，16 位与 32 位。16 位实际上是从 32 位字符串中，取中间的第 9 位到第 24位的部分，
          </div>

           <div style="padding-left:0px;padding-bottom:15px">
              17.BFC
              <p style="padding-left:15px">  BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，
                只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干 </p>
               <p style="padding-left:15px">  
                      BFC的布局规则
                          1、内部的Box会在垂直方向，一个接一个地放置。 <br />

                          2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置） <br />

                          3、每个元素的margin box的左边， 与包含块border box的左边相接触 <br />

                          4、BFC的区域不会与float box重叠。 <br />

                          5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 <br />

                          6、计算BFC的高度时，浮动元素也参与计算 <br />

                  </p>
                  <p style="padding-left:15px"> 哪些元素或属性能触发BFC   <br />
                        1、根元素(html)   <br />
                        2、float属性不为none    <br />
                        3、position为absolute或fixed    <br />
                        4、display为inline-block, table-cell, table-caption, flex, inline-flex   <br />
                        5、overflow不为visible   <br />
                  </p>

                  <p style="padding-left:15px"> 
                       BFC的应用   <br />
                              1、自适应两栏布局   <br />
                              2、清除内部浮动    <br />
                              3、防止margin上下重叠
                  </p>



            </div>

          <div style="padding-left:0px;padding-bottom:15px">
                    18.关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
          </div>
           <div style="padding-left:0px;padding-bottom:15px">
                    19. 强缓存和协商缓存怎么区分的  <br />
                      当浏览器再次访问一个已经访问过的资源时，它会这样做： <br />
                      1.看看是否命中强缓存，如果命中，就直接使用缓存了。 <br />
                      2.如果没有命中强缓存，就发请求到服务器检查是否命中协商缓存。 <br />
                      3.如果命中协商缓存，服务器会返回 304 告诉浏览器使用本地缓存。 <br />
                      4.否则，返回最新的资源。
          </div>  

           <div style="padding-left:0px;padding-bottom:15px">
                    19. 302重定向  304是协商缓存 后端数据没有变化
          </div> 

           <div style="padding-left:0px;padding-bottom:15px">
                    20.伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里  <br />
                     伪元素(after before)的操作对象是新生成的dom元素，而不是原来dom结构里就存在的；<br />
                     而伪类恰好相反，伪类的操作对象是原来的dom结构里就存在的元素。(a hover等)  <br />
          </div>   
          <div style="padding-left:0px;padding-bottom:15px">
                    21.  uni-app的存储方案比5+app要少，因为cookie、localstorage、sessionstorage、websql、indexedDB只有h5端支持，其他端都不支持。
                         uni.storage的键值对存储，这个是全端支持的。   <br />
                         uni-app的Storage在不同端的实现不同，uni.storage在app侧，映射为plus.storage；h5侧映射为localstorage；   <br />
                         各个小程序平台映射为其自带的storage键值对存储：   <br />

                      H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理   <br />
                      App端为原生的plus.storage，无大小限制，不是缓存，持久化   <br />
                      各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。 <br />
                      微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。  <br />
                      支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。  <br />
                      百度、头条小程序文档未说明大小限制   <br />

                      在3大主流渲染引擎里，webview、react native/weex、flutter，复杂度依次降低，渲染性能依次上升。   <br />
                      （uni-app是双渲染引擎，webview和weex都内置了，随便开发者使用切换）   <br />
          </div>     
          <div style="padding-left:0px;padding-bottom:15px">
                    22.  jpg不支持透明 png支持透明
          </div> 

           <div style="padding-left:0px;padding-bottom:15px">
                    23.  画三角形   <br />
                         设置border属性，长度宽度定义为0， 想要那个方向的三角形（上 右 下 左），就把其他方向的三角形颜色设置为 transparent   <br />
                          这只是其中的一种方法   <br />
                       https://huaweicloud.csdn.net/638edf70dacf622b8df8d175.html?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Eactivity-1-115663156-blog-124413951.pc_relevant_3mothn_strategy_and_data_recovery&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Eactivity-1-115663156-blog-124413951.pc_relevant_3mothn_strategy_and_data_recovery&utm_relevant_index=1  
          </div>

          <div style="padding-left:0px;padding-bottom:15px">
                    24.常见的CSS3 属性   <br />
                        部分例子： translate( x , y )、box-sizing、box-shadow、text-shadow、border-radius、border-image、background-size   <br />
          </div>
           <div style="padding-left:0px;padding-bottom:15px">
                    25.css 会造成dom渲染阻塞 不会造成dom树构建  
                       会阻塞js加载  GUI线程和js引擎互斥关系 js引擎在后  
          </div> 
          <div style="padding-left:0px;padding-bottom:15px">
                    <p style="padding-left:15px">  26.CSS中link和@import的使用区别 </p>
                    <p style="padding-left:15px"> 
                          兼容性问题 @import是css2.1引入，只有高版本的IE浏览器支持（大于IE5版本以上的），
                           link属于html元素不存在兼容问题。
                    </p>
                      <p style="padding-left:15px"> 
                          加载顺序
                          @import在页面加载完成后才可以加载css文件，
                          link因为属于html元素，所以在页面加载时同时加载css文件。
                    </p>
                      <p style="padding-left:15px"> 
                          从属关系
                          @import是 是css 的一个标签 ，只有导入样式表的作用,
                          link是html提供的标签，不仅可以加载 css 文件，还可以定义RSS（RSS教程:） 、rel 连接属性等。
                    </p>
                      <p style="padding-left:15px"> 
                          @import与link本质区别也是最重要的区别就是它们的从属关系的不同，
                          本质上使用选择差别不大，但为了软件中编辑布局网页html代码，一般使用link，也推荐使用link。
                    </p>
          </div> 
           <div style="padding-left:0px;padding-bottom:15px">
                    <p style="padding-left:15px">  27.HTTP 中 GET 与 POST 的区别 </p>
                    <p style="padding-left:15px"> 
                          get用来获取数据，post用来提交数据 
                    </p>
                    <p style="padding-left:15px"> 
                         get参数有长度限制（受限于url长度，具体的数值取决于浏览器和服务器的限制，最长2048字节），而post无限制。
                    </p>
                    <p style="padding-left:15px"> 
                         get请求的数据会附加在url之 ，以 " ？ "分割url和传输数据，多个参数用 "&"连接，而post请求会把请求的数据放在http请求体中。
                    </p>
                     <p style="padding-left:15px"> 
                          get是明文传输，post是放在请求体中，但是开发者可以通过抓包工具看到，也相当于是明文的。
                    </p>
                     <p style="padding-left:15px"> 
                          get请求会保存在浏览器历史记录中，还可能保存在web服务器的日志中
                    </p>
                     <p style="padding-left:15px"> 
                          ------------------------------------------------------------------
                    </p>
                      <p style="padding-left:15px"> 
                         get是请求获取指定资源，get方法时安全、幂等、可缓存的，get方法的报文主体没有任何语义。
                    </p>
                      <p style="padding-left:15px"> 
                         post是根据报文主体来对指定资源做出处理，post不安全，不幂等，不可缓存（大部分情况下）。
                    </p>
                     <p style="padding-left:15px"> 
                          ------------------------------------------------------------------
                    </p>
                     <p style="padding-left:15px"> 
                       所以当你一层一层的把get和post剖析到底，你会发现他们的本质就是tcp连接，
                       没有啥区别，只是由于http协议规定和浏览器或者服务器的限制，导致他们在应用过程中体现形式不同。
                    </p>
                    

          </div> 
          <div>
                     <p style="padding-left:15px"> 
                          webpack中的module是什么
                    </p>
                     <p style="padding-left:15px"> 
                          前端中的模块 支持 ESModule CommJs Amd Assest
                    </p>
                     <p style="padding-left:15px"> 
                          ------------------------------------------------------------------
                    </p>
                     <p style="padding-left:15px"> 
                          所以webpack中的 module 如何表达自己的各种依赖关系
                    </p>
                     <p style="padding-left:15px"> 
                         ESModule import    CommJs require
                    </p>
                    <p style="padding-left:15px"> 
                          ------------------------------------------------------------------
                    </p> 
                     <p style="padding-left:15px"> 
                          我们常说的 chunk  和 bundle 区别是什么
                    </p>
                     <p style="padding-left:15px"> 
                          chunk 是 webpack 打包过程中 modules的集合 是打包过程中的概念
                          webpack 的打包是从一个入口模块开始 入口模块引用其他模块 其他模块引用其他模块
                          webpack 通过引用关系逐个打包模块 这些module就行程了一个 chunk

                          如果是多入口的 可能会有多个打包路径 每条路径都会形成一个 chunk
                    </p> 
                    <p style="padding-left:15px"> 
                          bundle  就是我们最终输出的一个或者多个打包文件
                    </p>
                    <p style="padding-left:15px"> 
                          ------------------------------------------------------------------
                    </p> 
                    <p style="padding-left:15px"> 
                          chunk  和 bundle 的关系是什么
                    </p> 
                      <p style="padding-left:15px"> 
                         大多数情况下一个 chunk  产生一个 bundle  但也有例外
                         但是如果加了souremap  一个entry 一个chunk 对应2个 bundle

                         chunk是过程中的代码块   bundle 是打包结果输出的代码块  chunk在构建完成就程线为 bundle
                    </p> 
                     <p style="padding-left:15px"> 
                          ------------------------------------------------------------------
                    </p> 
                     <p style="padding-left:15px"> 
                          split chunk
                    </p> 
                      <p style="padding-left:15px"> 
                          ------------------------------------------------------------------
                    </p> 
                      <p style="padding-left:15px"> 
                          Plugin和loader 分别是做什么的  怎么工作的
                    </p>
                     <p style="padding-left:15px"> 
                          Plugin 和 loader 分别是做什么的  怎么工作的
                          loader模块转换器 将非js模块转换为 webpack 能够识别的js 模块
                          Plugin 扩展 插件  webpack运行的各个阶段都会广播出对应的事件  插件去监听对应的事情
                    </p>
                      <p style="padding-left:15px"> 
                          ------------------------------------------------------------------
                    </p> 
                      <p style="padding-left:15px"> 
                         Compiler
                         他是一个对象 包含了 webpack 环境中的所有配置 信息 包括 options   Plugin 和 loader
                          webpack 启动的时候实例化 他是全局唯一的 可以把他理解为webpack的实例
                    </p>
                     <p style="padding-left:15px"> 
                          ------------------------------------------------------------------
                    </p> 
                      <p style="padding-left:15px"> 
                          简单的描叙下webapck的打包过程吗
                          1.初始化参数
                          2.开始编译
                          3.确定入口
                          4.编译模块
                          5.完成编译模块
                          6.输出资源
                          7.输出完成
                    </p>
                    <p style="padding-left:15px"> 
                          ------------------------------------------------------------------
                    </p> 
                    <p style="padding-left:15px"> 
                       1.比较小的图片 就转换成base64 可以减少http请求
                       2.比较大的图就放在一个文件夹里面
                       3.抽离公共代码 (公共模块和第三方模块)
                    </p>
                     <p style="padding-left:15px"> 
                          ------------------------------------------------------------------
                    </p> 
                    <p style="padding-left:15px"> 
                       1、如何利用webpack来优化前端性能？ <br/>
                       压缩代码和删除多余的代码注释以及简化代码的写法等等方式  <br/>
                       利用cdn加速在构架过程中  <br/>
                       删除死代码 <br/>
                       提取公共代码  <br/>
                       开启热模块替换 <br/>
                       开启soucrmap <br/>
                       开启babel缓存  <br/>
                       使用contenthash  <br/>
                       externals 引入外部包  <br/>

                       代码分割  <br/>
                       懒加载  <br/>
                       预加载  <br/>
                       treeShaking  <br/>
                       使用pwa(兼容性不太好)  <br/>
                       


                    </p>
                     <p style="padding-left:15px"> 
                       2、如何提高webpack的构建(打包)速度？ <br/>
                        开启HMR  <br/>
                        开启OneOf (每个文件只被其中一个处理命中后 就不在执行下去)  <br/>
                        对js处理的时候 排除node_module文件夹的处理 因为他们已经处理过了  <br/>
                         开启eslint 和babel缓存  <br/>
                       使用happypack实现多线程加载编译  <br/>
                         treeShaking  <br/>
                         对图片进行压缩  <br/>
                         动态导入按需加载  <br/>
                         runtimechunk的使用  <br/>
                        剔除无用代码  <br/>
                       
                    </p>

                    
          </div>
           <div>
                 <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                  </p>
                   <p style="padding-left:15px"> 
                          事件循环的机制 
                  </p>
                   <p style="padding-left:15px"> 
                          先执行同步任务，然后执行异步任务队列中的微任务，再执行宏任务，执行宏任务时，如果遇到微任务就会把微任务放入微任务队列中，
                          遇到宏任务就会把宏任务放入宏任务队列中，当执行完这个宏任务后，会立即将微任务队列中的任务执行完，
                          当微任务队列为空后，再执行下一个宏任务，如此往复。 
                  </p>
          </div>
          <div>
                 <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                  </p>
                   <p style="padding-left:15px"> 
                        为什么js中有 事件循环的机制 
                  </p>
                   <p style="padding-left:15px"> 
                          js是单线程的 
                  </p>
          </div>
           <div>
                 <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                  </p>
                   <p style="padding-left:15px"> 
                        为什么引入微任务概念 只要 宏任务 不行吗
                  </p>
                   <p style="padding-left:15px"> 
                          宏任务是先进先出的  如果来了一个优先级更高的任务 那怎么办
                          所以引入微任务的概率 有点像C里面的中断
                  </p>
          </div>
          <div>
                 <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                  </p>
                   <p style="padding-left:15px"> 
                          await 我们可以理解为 new Promise
                          await 后面的代码我们可以理解为 new Promise.then()后面的代码
                  </p>
          </div>
           <div>
                 <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                  </p>
                   <p style="padding-left:15px"> 
                          事件的捕获和冒泡机制
                  </p>
                   <p style="padding-left:15px"> 
                          事件的捕获  是从上到下
                   </p>
                    <p style="padding-left:15px"> 
                          事件的冒泡机制 是从下到上
                   </p>
                    <p style="padding-left:15px"> 
                           window.addEventListener 监听的是什么阶段的事件 <br />
                           window.addEventListener('click',()=>{

                           })   <br />
                            window.addEventListener('click',()=>{

                           },true)   捕获阶段 <br />
                            window.addEventListener('click',()=>{

                           },false)   false或者没传 冒泡阶段 <br />

                    </p>
                     <p style="padding-left:15px"> 
                          平常什么时候用到这个机制  事件委托
                     </p>
                       <p style="padding-left:15px"> 
                          一个场景  一个页面有好多的点击事件  现在后端返回一个字段 表明是否禁止 禁止就不能点击
                          第一种方法加一个禁止的遮照层 
                          第二种方法 在顶级元素加一个捕获事件 
                     </p>
                      <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                      </p>
                      <p style="padding-left:15px"> 
                              防抖:input框的输入
                              节流:resize  scroll
                      </p>
                        <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                      </p>
                      <p style="padding-left:15px"> 
                              计算属性实现的原理 <br />
                              computed watcher 有一个dep实例 通过 dirty 属性来标记属性是否重新求值 <br />
                              当computed依赖的值改变后 就会通知订阅的watcher就行更新  computed watcher 会吧 <br />
                              dirty 的属性设置成为true 并且进行计算属性方法的调用 <br />
                      </p>
                       <p style="padding-left:15px"> 
                              computed 所谓的缓存是什么 <br />
                              computed 是基于响应式进行依赖缓存的 只要当依赖的值改变是才重新求值
                      </p>
                        <p style="padding-left:15px"> 
                              computed 缓存存在的意思  或者你经常在什么地方使用 <br />
                              类型的转换或者一些格式的转换 或者数据的接收 
                      </p>
                        <p style="padding-left:15px"> 
                              computed  只能监听data里面被oberser的数据 别的都是不可以的 比如缓存里面的 时间戳的都是不行的
                      </p>
                       <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                      </p>
                       <p style="padding-left:15px"> 
                           在数据变化后要执行某个操作 而这个操作依赖因你数据改变而改变DOM  这个操作就因改放在nextTick中
                      </p>
                       <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                      </p>
                       <p style="padding-left:15px"> 
                          HTTP1.0 每次TCP 连接都只能发送一个请求 当服务器响应后就关闭此次连接,下次在发送请求还的建立连接 <br>
                          HTTP1.1 默认采用了持续连接 可以被多个请求复用 增加了管道机制 在同一个TCP连接里 润允许多个请求同时发送 增加了一定的并发性
                           同一个TCP连接里 所有的数据通信都是按照顺序进行的 如果服务器响应慢 会有很多的请求在排队 造成队头阻塞
                           <br>
                           HTTP2.0 加了双工模式 客户端可以同时发送多个请求 服务器也可以同时响应多个请求解决了HTTP 队头阻塞问题
                           服务器端可以主动的向客户端发送数据

                      </p>
                      <p style="padding-left:15px"> 
                          由于浏览器最大连接数数的限制 所以才有了最大并发请求数的限制  <br>
                          2.0 同一域名下的所有通信都在单个连接 上完成
                      </p>
                        <p style="padding-left:15px"> 
                           HTTP1.1 为啥不能实现多路复用 <br>
                           HTTP2.0 基于二进制帧的协议 <br>
                           HTTP1.1 基于文本分割解析的协议 <br>
                      </p>
                       <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                      </p>
                       <p style="padding-left:15px"> 
                          挂载在原型是我们可以new 的  Promise.all 这种的是静态方法不能挂载在原型 
                      </p>
                         <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                      </p>
                       <p style="padding-left:15px"> 
                         虚拟dom的缺点 首次渲染大量dom的时候 由于多了一层虚拟的技术 会比innerhtml慢
                      </p>
                        <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                      </p>
                       <p style="padding-left:15px"> 
                           1.Symbol 可以解决属性名冲突的问题 构造唯一的属性名和变量
                           2.私有属性
                      </p>
                       <p style="padding-left:15px"> 
                           JSON.stringify() 会忽略 Symbol  除了这个还有什么 undefined  函数 <br>
                           如果对象有循环引用的问题  那么  JSON.stringify()会报错  <br>
                           到底是 JSON.stringify() 报错还是 JSON.parse()  确实是 JSON.stringify()

                      </p>
                        <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                      </p>
                       <p style="padding-left:15px"> 
                           前端的性能优化  <br>
                           1.只请求当前需要的资源 异步加载 懒加载 polyfill <br>
                           2.缩小资源体积  打包压缩 gzip 图片格式的优化 压缩  劲量控制cookie的大小  <br>
                           3.时序的优化 promsie.all() ssr prefetch  prerender  preload  例如  link  rel='dns-prefetch' href="xxxxxx" <br>
                           4.合理的利用缓存  cdn cdn预热  cdn刷新

                      </p>
                       <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                      </p>
                       <p style="padding-left:15px"> 
                          如果一段js执行的时间比较长怎么去分析  写个用装饰器看下这段代码用了多少时间
                      </p>
                      <p style="padding-left:15px"> 
                          ---------------------------------------------------------------- 
                      </p>
                       <p style="padding-left:15px"> 
                          内存的生命周期  <br>
                          1.内存的分配  <br>
                          2.内存的使用  <br>
                          3.内存的回收  <br>
                      </p>
                        <p style="padding-left:15px"> 
                          js垃圾回收机制  <br>
                          1.应用计数   缺点 循环引用 <br>
                          2.标记清除  <br>
                      </p>
                       <p style="padding-left:15px"> 
                          js有哪些常见的内存泄漏  <br>
                          1.全局变量 <br>
                          2.未被清除的定时器和函数  <br>
                          3.闭包  <br>
                          4.dom的引用
                      </p>
                        <p style="padding-left:15px"> 
                          如何避免内存泄漏  <br>
                          1.减少不必要的全局变量 <br>
                          2.使用完后在合适的时候解除引用
                      </p>
                        <p style="padding-left:15px"> 
                          number 8个字节  string 2   boolean  4个  <br>
                      </p>
                       <p style="padding-left:15px"> 
                          如何检测文件的类型   魔数  <br>
                          https://blog.csdn.net/m0_68349563/article/details/128443697
                      </p>




          </div>
         

            



  </div>
</template>

<script>
import DropdownMenu from '@/components/Share/DropdownMenu'

export default {
  name: 'Documentation',
  components: { DropdownMenu },
  data() {
    return {
      articleList: [
         {
           id:"1",
           name:"xiaoming"
         },
          {
           id:"2",
           name:"xiaohong"
         }, {
           id:"3",
           name:"xiaoqiang"
         }
      ],
      showStatus:true,
    }
  },
  mounted(){
    sessionStorage.setItem('myname','王大仙');
    let dataOne={
         a:1,
         b:{
              a:10
         },
         cc:undefined,
         dd:null,
         ee:function(){

         }

    }
    let dataTwo=JSON.parse( JSON.stringify( dataOne ) )
    //  console.log( 'eeeeeeeee' )
    //  console.log( dataTwo )
    //  console.log( 'eeeeeeeee' )
    //this.forOf()
    console.log(this.$router)
    window.localStorage.setItem('demoDemo','lllmmmmmm')
  },
  methods:{
       enterClickFm(){
          this.showStatus=!this.showStatus
       },
      //虚拟DOM 
      //  addClickFm(){
      //      this.articleList.unshift({
      //           id:"4",
      //           name:"xiaolong"
      //      })
      //  }

      forOf(){
            let obj={
                  count:1,
                  [Symbol.iterator]:()=>{
                        return{
                              next:()=>{
                                   obj.count++
                                   if(obj.count<=10){
                                        return{
                                              value:obj.count,
                                              done:false,
                                        }
                                   } else{
                                         return{
                                              value:undefined,
                                              done:true,
                                        }
                                   }
                              }
                        }
                  }
            }
            for( const item of obj){
                console.log(item)
            }
      }
      //要想for of 遍历对象 我们可以加一个迭代器


  }
}
</script>

<style lang="scss" scoped>
.documentation-container {
  margin: 0px;
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: flex-start;

}
</style>
